#define layout()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>幸运刮刮乐</title>
    <link rel="stylesheet" href="../wx/choujianng/award_guajiang1/css/style.css">    
</head>
<body>
    <header>
        <div class="scratch">
            <div class="scratch_num">
                您还有 <span class="nums"> #(SCORE) </span> 积分
            </div>
            <!--<div class="scratch_num">
               每次抽奖花费#(REDUCENUM)积分
            </div> -->
            <div class="scratch_area">
                <div class="award"> 谢谢参与 </div>
                <img id="scratch_Img" src="../wx/choujianng/award_guajiang1/images/award_no.png" alt="">
                <div class="awardMark awardMark1">
                    <p>刮奖赢大礼</p>
                    <p class="awardBtn">点我刮奖</p>
                </div>
                <div class="awardMark awardMark2">
                    <p>你没有刮奖机会了</p>
                    <p>快去下单吧</p>
                </div>
            </div>
        </div>
    </header>

    <section class="section_a">
        <div class="goAwardList">
            <img src="../wx/choujianng/award_guajiang1/images/quan.png" alt="">
            <p>我的奖品记录</p>
        </div>
    </section>

    <section class="menberList">
        <p class="title">获奖名单</p>
        <div class="content awardMenberList">
            <div class="swiper">
                <div class="swiperContent"></div>
            </div>
        </div>
    </section>

    <section class="awardRule">
        <div class="title">活动规则</div>
        <div class="content">
        	#if(PARTY_RULE != "")
        	    #(PARTY_RULE)
        	#else
        	    <div>1.在活动期间完成签到1次可获得1次刮奖的机会，点击抽奖界面进行抽奖。</div>
            <div>2.当用户提交一个订单后，可获得1次刮奖的机会，点击抽奖界面进行抽奖。</div>
            <div>3.优惠券截止使用时间9月1日24:00</div>
        	#end
        </div>
    </section>

    <section class="awardList">
        <div class="title">奖品展示</div>
        <div class="content">
            <div>
                <!--<div> 
                    <img src="../wx/choujianng/award_guajiang1/images/guo.png" alt=""> 
                    <p>电饭锅</p>
                </div>-->
                <div> 
                    <img src="../wx/choujianng/award_guajiang1/images/quan.png" alt="">
                    <p>儿童轮滑鞋</p>
                </div>
                <div> 
                    <img src="../wx/choujianng/award_guajiang1/images/quan.png" alt="">
                    <p>半球电水壶</p>
                </div>
                  <div> 
                    <img src="../wx/choujianng/award_guajiang1/images/quan.png" alt="">
                    <p>拖鞋</p>
                </div>
                <div> 
                    <img src="../wx/choujianng/award_guajiang1/images/quan.png" alt="">
                    <p>五元优惠券</p>
                </div>
            </div>
        </div>
    </section>
    <footer></footer>

    <!-- 奖品弹窗 -->
    <aside>
        <div>
            <p>恭喜你获得了 <span class="awardAl">5 元优惠券</span></p>
            <p class="awardAl">5 元优惠券</p>
        </div>
        <div class="close"></div>
    </aside>
</body>
<script src="../wx/choujianng/award_guajiang1/js/jquery-1.8.3.min.js"></script>

<script src="../wx/choujianng/award_guajiang1/js/jquery.eraser.js"></script>
<script>
    $(window).load(function  () {
        var wins = window.screen;
        var wid = wins.availWidth;
        var hei = wins.availHeight;
        
        // 定位中奖弹窗
        $('aside').css({ 'width': wid+'px', 'height': hei+ 'px' });
        $('aside div:first-child').css({ 'top': (hei-316)/2+'px', 'left': (wid-320)/2+ 'px' });
        $('aside .close').css({ 'top': (hei-316)/2 + 340 +'px', 'left': (wid - 30.5)/2 + 'px' });
        
        // 刮奖设置 参数 'clear' ---- 清除所有，'reset' --- 重置
        $('#scratch_Img').eraser( {
			size: 20,   //设置橡皮擦大小
			completeRatio: .1, //设置擦除面积比例
			completeFunction: showResetButton   //大于擦除面积比例触发函数
		});
        
        // 大于擦出面积触发函数
        function showResetButton(){
            $('#scratch_Img').eraser( 'clear' );
            if(jp==1){
            	   setTimeout(function () { $('aside').show(); }, 500);
            }else{
            	setTimeout(function () {  var nums = parseInt($('.scratch_num span').text());
            if(nums > 0){
                $('.awardMark1').show();
            } else if (nums == 0) {
                $('.awardMark1').hide();
                $('.awardMark2').show();
            }
            $('aside').hide();
            $('#scratch_Img').eraser( 'reset' );}, 2000);
            	
            }
           
        }
        var turnplate={
		     restaraunts:[]				//大转盘奖品名称
		};
        #for(x:PRIZELIST)
	      turnplate.restaraunts[#(for.index)] ="#(x.prize_name)";
	    #end
	    
	    var nums = #(SCORE);
        // 获奖名单
        function showMenberList() {
            var arr = [
                { name: '138****1412', award: '5 元优惠券' },
                { name: '189****4678', award: '5 元优惠券' },
                { name: '139****4132', award: '5 元优惠券' },
                { name: '136****8547', award: '5 元优惠券' },
                { name: '138****3867', award:  '拖鞋一双' },
                { name: '136****3447', award: '5 元优惠券' },
                { name: '155****2443', award: '5 元优惠券' }
            ];

            var list = '';

            for(var i = 0; i < arr.length; i++){
                list += '<div> <span>'+ arr[i].name +'</span> 获得了 <span>'+ arr[i].award +'</span> </div>';
            }

            $('.awardMenberList .swiperContent').html(list);

        }

        // 中奖轮播
        function autoScroll(){ 	
            $('.swiperContent').animate({ 
                marginTop : "-26px" 
            },500,function(){ 
                $(this).css({marginTop : "0px"}).find("div:first").appendTo(this); 
            }) 
        } 
        
        $(function(){ 
            setInterval( function () { autoScroll() }, 3000);
        })
        

        // 获取抽奖次数
//      function getNums () {
//          $.ajax({
//              type: 'GET',
//              url: '', 
//              success: function (e) {
//                  var num = parseInt($('.scratch_num span').text()); // 后台获取抽奖次数
//                  var scratch_num = num-1; // 抽奖次数
//                  
//                  $('.scratch_num span').text(scratch_num); // 抽奖次数显示
//              }
//          })
//      }
        
        var jp = 0;
        var reduceNum = #(REDUCENUM);
        // 获取奖品
        function getAward () {
        	   jp=0;
            $.ajax({
                 type: "GET",
	             url: "../marketingController/getAwards",
	             data: {USER_CODE:#(USER.USER_CODE), PARTY_ID:#(PARTY_ID)},
	             dataType: "json",
	             async: false ,
                 success: function (data) {
                	     nums = nums -reduceNum;
             	     $('.nums').html(nums);
             	     var award = '5 元优惠券'; // 奖品名称
		             if(data.msg == "SUCCESS"){
		             	   award = data.data.prize_name;
		                   $('.award').text(award); // 刮奖奖品 
		                   $('.awardAl').text(award); // 刮奖弹窗奖品 
		                   jp=1;
		             } else if(data.data!=null){
						 if(data.data.prize_name=='谢谢参与'){
						 	 award = "谢谢参与";
						 }else{
						 	 award = "谢谢参与";
//						 	 alert(data.msg);
						 }
		             }else{
	             	     award = "谢谢参与";
//	             	     alert(data.msg);
	             	      $('.awardMark1').show();
	             	      $('aside').hide();
		             }
                }
            })
        }


        showMenberList(); // 获取订单列表
        
        // 跳转我的奖品页
        $('.goAwardList').click(function () { 
//          window.location.href = '../wx/choujianng/award_guajiang1/awardList.html';
            window.location.href = "../party/myAward?party_id=" + #(PARTY_ID) + "&user_id="+#(USER.ID);
        });
        
        // 点我刮奖
        $('.awardBtn').click(function () {
//          getNums(); // 获取抽奖次数
            if(nums-reduceNum>=0){
               $('.awardMark').hide();
            	   getAward(); // 获取抽奖奖品
            }else{
            	   alert("您没有抽奖机会了");
            }
           
        });

        // 关闭弹窗
        $('.close').click(function () {
            var nums = parseInt($('.scratch_num span').text());
            if(nums > 0){
                $('.awardMark1').show();
            } else if (nums == 0) {
                $('.awardMark1').hide();
                $('.awardMark2').show();
            }
            $('aside').hide();
            $('#scratch_Img').eraser( 'reset' );
        })
    })
</script>
</html>
  #end
#@layout()